<template>
	<view>
		<view>
			<u-toast ref="uToast" show="true" />
		</view>
		<view>
			<!-- 搜索条件 -->
			<u-sticky>
				<view class="search">
					<view style="padding: 20rpx;width: 410rpx;">
						<u-calendar :show="dateShow" mode="range" @confirm="changeDate" @close="closeDate" showLunar
							:maxDate="maxDate" :minDate="minDate" monthNum="12">
						</u-calendar>
						<u-button @click="dateShow = true" shape="circle" plain type="info" :text="dateHint"
							icon="calendar">
						</u-button>
					</view>
				</view>
			</u-sticky>
		</view>

		<!-- 表格 -->
		<view class="tableBox">
			<uni-table emptyText="暂无更多数据" border="true" :loading="loading">
				<uni-tr>
					<uni-th align="center" width="200rpx">租借用户id</uni-th>
					<uni-th align="center">微信昵称</uni-th>
					<uni-th align="center" width="110rpx">头像</uni-th>
					<uni-th align="center" width="135rpx">区域id</uni-th>
					<uni-th align="center" width="185rpx">租赁套餐id</uni-th>
					<uni-th align="center" width="250rpx">租借后的商家id</uni-th>
					<uni-th align="center" width="160rpx">剩余天数</uni-th>
					<uni-th align="center" width="100rpx">租金</uni-th>
					<uni-th align="center" width="140rpx">状态</uni-th>
					<uni-th align="center" width="100rpx">备注</uni-th>
					<uni-th align="center" width="300rpx">创建时间</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in list">

					<uni-td align="center">{{item.rentUsId}}</uni-td>
					<uni-td align="center">{{item.nick}}</uni-td>
					<uni-td align="center">
						<u--image :showLoading="true" :src="item.avatar" width="60rpx" height="60rpx"
							style="align-items: center"></u--image>
					</uni-td>
					<uni-td align="center">{{item.regionId}}</uni-td>
					<uni-td align="center">{{item.rentMenuId}}</uni-td>
					<uni-td align="center">{{item.rentMerchantId}}</uni-td>
					<uni-td align="center">{{item.day}}</uni-td>
					<uni-td align="center">{{item.payAmount}}</uni-td>
					<uni-td align="center">
						<rich-text v-html="getStatus(item.status)"></rich-text>
					</uni-td>
					<uni-td align="center">{{item.remark}}</uni-td>
					<uni-td align="center">{{getTime(item.createTime)}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>

		<!-- 删除确认模态框 -->
		<u-modal :show="removeShow" title="确认删除" :content='removeContent' showCancelButton @cancel="removeShow=false"
			@confirm="removeRegion"></u-modal>
		<!-- 分页 -->
		<view>
			<page-pagination :total="params.total" :pageSize="params.pageSize" :showAround="true" :btnText="true"
				:forceEllipses="true" @change="getList"></page-pagination>
		</view>
	</view>
</template>

<script>
	import SOtime from '@/js_sdk/fl-SOtime/SOtime.js'
	import merchantsLoginVue from '../merchantsLogin.vue'
	export default {
		data() {
			return {
				removeId: "",
				removeShow: false,
				removeContent: "此操作将删除该区域，如果有出租或该区域有产品则会删除失败, 是否继续?",
				modalShow: false,
				modalTtile: "",
				regionFrom: {
					handleType: 1 //1:添加 2:修改
				},
				list: [],
				loading: true,
				token: "",
				dateShow: false,
				show: false,
				params: {
					//总记录数
					total: 0,
					//每页多少条	
					pageSize: 10,
					orderNum: "",
					status: "",
					startTime: "",
					endTime: ""
				},
				statusHint: "订单状态筛选",
				dateHint: "日期范围筛选",
				dateList: [],
				maxDate: "",
				minDate: ""
			}
		},
		onLoad() {
			this.contentType = this.$reqConfig.CONTENTTYPE + ";+charset=UTF-8"
			this.token = uni.getStorageSync("merchantsToken").token
			this.defaultDate()
			this.search()
		},
		methods: {
			getList(e) {
				this.loading = true
				this.$axios({
					url: "/merchant/merchantPlotRent/leaseList",
					method: "post",
					data: {
						pageNo: e,
						pageSize: this.params.pageSize,
						status: this.params.status,
						startTime: this.params.startTime,
						endTime: this.params.endTime
					},
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
				}).then((res) => {
					//请求接口成功之后，判断加载状态，处理数据
					this.list = res.result.list
					this.params.total = res.result.total
					this.loading = false
				})
			},
			search() {
				this.getList(1);
			},
			//设置默认最早时间和默认最晚时间
			defaultDate() {
				const d = new Date()
				const year = d.getFullYear()
				this.minDate = year + "-01-01"
				this.maxDate = year + "-12-31"
			},
			//选择日期
			changeDate(e) {
				this.dateHint = e[0] + "-" + e[e.length - 1]
				this.params.startTime = e[0] + " 00:00:00"
				this.params.endTime = e[e.length - 1] + " 23:59:59"
				this.dateShow = false
				this.search()
			},
			closeDate(e) {
				this.params.startTime = ""
				this.params.endTime = ""
				this.dateShow = false
				this.dateHint = "选择日期范围"
			},
			//选择订单状态
			changeStatus(e) {
				this.params.status = e.indexs
				if (e.indexs == 7) {
					this.params.status = -1
				}
				if (e.indexs == 8) {
					this.params.status = -2
				}
				if (e.indexs == 9) {
					this.params.status = ""
				}
				this.statusHint = this.columns[0][e.indexs]
				this.show = false
			},
			getStatus(status) {
				switch (status) {
					case 0:
						return "<font style='color: #7a7a7a'>未生效</font>";
					case 1:
						return "<font style='color: #76c379'>已生效</font>";
					case -1:
						return "<font style='color: red'>已过期退回</font>";
				}
			},
			getTime(time) {
				return SOtime.time3(time);
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.uni-fab {
		z-index: 999 !important;
	}

	.uni-fab--rightTop {
		top: 14rpx !important;
	}

	.uni-fab__circle--rightTop {
		top: 14rpx !important;
	}

	.uni-fab__content--other-platform {
		z-index: 999 !important
	}

	.search {
		display: flex;

		.date {
			font-size: 25rpx;
			color: #c3c3c3;
		}
	}

	.tableBox {
		border-left: none;
		margin: 30rpx;
		border-style: solid;
		color: #2d2d2d0d;
		border-width: 5rpx;
		border-top: none;
		border-bottom: none;

		.uni-table-th {
			background-color: #f5f7fa;
			color: #909399;
		}

		.uni-table--loader {
			left: -250rpx;
			border: 9px solid #165eff;
		}
	}
</style>
